<template>
    <div>
        <h1  align="center"> 门店增加 </h1>
         <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">门店名称</td>
                    <td><input type="text" v-model="info.shopName"></td>
                </tr>
                <tr>
                    <td align="right">分店名称</td>
                    <td><input type="text" v-model="info.brachName"></td>
                </tr>
                 <tr>
                    <td align="right">门店图片</td>
                    <td>
                        <input type="file" @change="img">
                        <img 
                        :src="info.shopImg"
                         width="100" 
                         height="100" 
                         v-if="info.shopImg !=''" 
                        />
                    </td>
                </tr>
                <tr>
                    <td align="right">开业时间</td>
                    <td><input type="date" v-model="info.openTime"></td>
                </tr>
                <tr>
                    <td align="right">是否启用</td>
                    <td>
                        <input type="radio" v-model="info.state" name="state" :value="0">是
                        <input type="radio" v-model="info.state" name="state" :value="1">否
                    </td>
                </tr>
                <tr>
                    <td align="right">门店特色</td>
                    <td>
                        <input type="checkbox" name="tese" v-model="info.tese" value="婚宴">婚宴
                        <input type="checkbox" name="tese" v-model="info.tese" value="升学宴">升学宴
                        <input type="checkbox" name="tese" v-model="info.tese" value="订婚宴">订婚宴
                        <input type="checkbox" name="tese" v-model="info.tese" value="生日宴">生日宴
                    </td>
                </tr>
                    
                <tr>
                    <td align="right">联系电话</td>
                    <td><input type="text" v-model="info.tel"></td>
                </tr>
                <tr>
                    <td align="right">门店介绍</td>
                    <td><input type="text" v-model="info.desc"></td>
                </tr>
                <tr>
                    <td align="right">门店地址</td>
                    <td><select v-model="info.addressId">
                        <option value="">请选择</option>
                        <option v-for="i in list" :value="i.addressId">{{ i.addressName }}</option>
                    </select></td>
                </tr>
                <tr>
                    <td align="right">门店类型</td>
                    <td>
                        <select v-model="info.shopType">
                            <option value="">请选择</option>
                            <option value="普通酒店">普通酒店</option>
                            <option value="豪华酒店">豪华酒店</option>
                            <option value="电竞酒店">电竞酒店</option>
                            <option value="竞技酒店">竞技酒店</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td><input type="button" value="提交" @click="add" class="btn btn-info"></td>
                </tr>
            </tbody>
        </table>
        {{ info}}
    </div>
    
</template>

<script setup lang="ts">
import router from "@/router";
import axios from "axios";
import { ref,reactive,onMounted } from "vue";
import moment from "moment";
import {useRoute, useRouter } from 'vue-router';

const Route=useRoute();
const Router=useRouter();





//稳点增加时想后端专递的数据
let info:any=reactive({

  shopName: "",
  brachName: "",
  shopImg: "",
  openTime: "",
  state: "",
  tese: [],
  tel: "",
  desc: "",
  addressId: "",
  shopType: ""

})

//接受下拉框数据
let list:any=ref([])

onMounted(()=>{
    bindlist();
})


const bindlist=()=>{
    axios({
        url:'/api/Shop/BindAddress',
        method:'get',
    })
    .then((res)=>{
    //后端返回的数据
        console.log(res);
        list.value=res.data;
   })
   .catch((err)=>{
        console.log(err);
   })
}

const add=()=>{
    if(info.shopName=="")
    {
        alert("门店名称不能为空");
        return;
    }
    if(info.brachName=="")
    {
        alert("分店名称不能为空");
        return;
    }
    if(info.tese=="")
    {
        alert("门店特色不能为空");
        return;
    }

    if(info.tel=="")
    {
        alert("联系电话不能为空");
        return;
    }
    if(info.desc=="")
    {
        alert("门店名称介绍不能为空");
        return;
    }
    if(info.addressId=="")
    {
        alert("门店地址不能为空");
        return;
    }
    if(info.shopType=="")
    {
        alert("门店类型不能为空");
        return;
    }
    info.tese=info.tese.toString();
    axios({
        url:'/api/Shop/AddShop',
        method:'post',
        data:info
    })
    .then((res)=>{
    //后端返回的数据
        console.log(res);
        if(res.data==-1)
        {
            alert("门店名称已存在");
            return;
        }
        if(res.data>0)
        {
            alert("添加成功");
            //跳转到会员列表
            router.push('/showshop');
            return;
        }
        else
        {
            alert("添加失败");
        }
   })
   .catch((err)=>{
        console.log(err);
   })
}

//图片上传
const img = (e:any)=>{
    //e:表示事件对象 只要触发事件就会存在事件对象
    //获取上传文件
    var obj= e.target.files[0];
    //将上传的文件转换成formData格式 转成表单对象并且是键值对形式
    let f = new FormData();//创建空的表单对象
    f.append('fl',obj);   //append追加

    //发送网络请求实现图片上传
    axios({
        url:'/api/Upload/Img',
        method:'post',
        data:f
    })
    .then((res)=>{
        console.log(res);
        
        if(res.data=="不是图片")
        {
            alert("您上传的不是图片");
            return;
        }
        if(res.data=="大于2M")
        {
            alert("您上传的图片大于2M");
            return;
        }
        info.shopImg=res.data
    })
    .catch((err)=>{
    //catch相当于error 失败 catch后端请求失败时的结果  
    console.log(err);
    })
}




</script>

<style scoped>

</style>